<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基本信息设置</title>
	<link rel="stylesheet" href="/index.css"/>
	<script src="/js/vue.js"></script>
	<script src="/index.js"></script>
	<script src="/js/axios.min.js"></script>
	<script src="/js/city.js"></script>
</head>
<body>
<div id="app">
	<div class="container">
				<el-form  label-width="150px" >
					<el-form-item label="昵称">
						<el-input v-model="app.applicant_name" ></el-input>
					</el-form-item>
					<el-form-item label="状态">
							<el-select v-model="app.applicant_con" placeholder="">
								<el-option label="求职" value="求职"></el-option>
								<el-option label="自由工作" value="自由工作"></el-option>
								<el-option label="正常工作" value="正常工作"></el-option>
							</el-select>
					</el-form-item>
					<el-form-item label="学校">
						<el-input v-model="app.university" ></el-input>
					</el-form-item>
					<el-form-item label="学历">
						<el-select v-model="app.degree" placeholder="">
							<el-option label="中专" value="中专"></el-option>
							<el-option label="大专" value="大专"></el-option>
							<el-option label="本科" value="本科"></el-option>
							<el-option label="硕士" value="硕士"></el-option>
							<el-option label="博士" value="博士"></el-option>
							<el-option label="其他" value="其他"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="职业分类">
						<el-select v-model="app.job_type" placeholder="">
							<el-option label="技术" value="技术"></el-option>
							<el-option label="产品类" value="产品类"></el-option>
							<el-option label="设计类" value="设计类"></el-option>
							<el-option label="运营类" value="运营类"></el-option>
							<el-option label="市场与营销" value="市场与营销"></el-option>
							<el-option label="职能" value="职能"></el-option>
							<el-option label="金融类" value="金融类"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="职业">
						<el-input v-model="app.job" ></el-input>
					</el-form-item>
					<el-form-item label="工作时间段">
							<p>开始时间：{{ app.applicant_time1 }}</p>
							<el-time-picker
									v-model="app.applicant_time1"
									:picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
									placeholder="任意时间点">
							</el-time-picker>
							<p>结束时间：{{ app.applicant_time2 }}</p>
							<el-time-picker
									v-model="app.applicant_time2"
									:picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
									placeholder="任意时间点">
							</el-time-picker>
					</el-form-item>
					<el-form-item label="所在地区（每次保存或修改都必须选择）">
								<br><div>
									<el-cascader :props="{value:'label', label: 'label', children: 'children'}"
												 :options="applicant_city"
												 v-model="app.applicantCity"
												 expand-trigger="hover"
												 change-on-select clearable placeholder="请选择地区位置">

									</el-cascader>
								</div>
					</el-form-item>
					<el-form-item label="可工作区域">
						<el-radio v-model="app.applicant_site" label="1">驻场工作</el-radio>
						<el-radio v-model="app.applicant_site" label="2">远程工作</el-radio>
					</el-form-item>
					<el-form-item label="上传头像">
							<el-input v-model="app.applicant_img_url"  type="file"></el-input>
					<div class="user-icon-tips">上传个人真实生活照/职业照，提高技术信用</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="saveApplicant">保存</el-button>
					</el-form-item>

				</el-form>

</div>
</div>

</body>
</html>
<script>
	var vm=new Vue({
		el: "#app",
		data: {
			applicant_city: cities,
			app:{
				applicantCity:[],
				applicant_city:'',
			},
		},
		methods: {
			handleChange(val){
				console.log(val)
			},
			handleAvatarSuccess(res, file) {
				this.applicant_image_url = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			saveApplicant:function(){
				var applicant_id = window.localStorage.getItem("applicant_id")
				var applicant_name = window.localStorage.getItem("applicant_name")
				this.app.applicant_city=this.app.applicantCity.toString();
				console.log(this.app)
				axios.post('/app/update2', this.app)
						.then(function (response) {
							console.log(response.data);
							if(response.data==1){
								alert("保存成功！")
								location.href="1.html"
							}
						})
						.catch(function (error) {
							console.log(error);
						});
			}
		},
		mounted() {
			var _this = this
			var applicant_id = window.localStorage.getItem("applicant_id")
			console.log("主键为："+ applicant_id)
			axios.get('/app/update2',{
				params:{
					applicant_id: applicant_id
				}
			})
					.then(function (response){
						_this.app = response.data
						console.log(response.data);
					})
					.catch(function (error){
						console.log(error);
					});
			//this.$forceUpdate()

		},
	})

</script>

<style>

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}
.el-input{
	width:300px;
}
	body > .el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.linkage {display: flex;}

	div { margin-right: 5px }

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
